<template>
  <div class="app-container">
    <el-row>
      <el-tabs v-model="activeTab" @tab-click="changeTab" tab-position="top">
        <el-tab-pane v-for="tab in userTables" :label="tab.formDefName" :name="tab.formDefKey" :lazy="true">
          <el-skeleton v-if="!tab.json" />
          <parser v-if="tab.json" :key="tab.key2" :form-conf="tab.json" @submit="sumbitForm" />
        </el-tab-pane>
      </el-tabs>
    </el-row>
    <el-row>
      <div class="top-right-btn">
        <el-tooltip class="item" effect="dark" content="筛选" placement="top">
          <el-button size="mini" icon="el-icon-tickets" @click="showDatas" />
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="筛选全部" placement="top">
          <el-button size="mini" icon="el-icon-document-copy" />
        </el-tooltip>
      </div>
    </el-row>
  </div>
</template>

<script>

    import Parser from '@/views/tool/openform/parser/Parser'
    import {getUserTablesForUser} from '@/api/renshi/person/userTable'
    import {getDefByKey} from "@/api/openform/generator"

    export default {
        name: "userTableForUser",
        data() {
            return {
                userTables: null,
                activeTab: null,
                userId: this.$route.params.userId,
            };
        },
        components: {
            Parser
        },
        watch: {
            activeTab(val, oldVal) {
                //console.log(oldVal+" -> "+val);
                /*if(val && val!=0) {
                    this.loadTable(val);
                }*/
            },
        },
        mounted() {
        },
        created() {
            getUserTablesForUser(this.userId).then(res => {
                if(!res.data || res.data.length<=0) {
                    this.$message.warning("该用户没有任何信息表");
                    return;
                }
                this.userTables = res.data;
                this.activeTab = res.data[0].formDefKey;
                this.loadTable(this.activeTab);
            });
        },
        methods: {
            changeTab(tab, event) {
                this.loadTable(tab.name);
            },
            loadTable(tabName) {
                this.userTables.forEach(e => {
                    if(e.formDefKey==tabName && !e.key2) {
                        console.log("加载"+tabName);
                        getDefByKey(e.formDefKey).then(res => {
                            return res;
                        }).then(res => {
                            this.$nextTick(() => {
                                if(res.data && res.data.json) {
                                    e.json = JSON.parse(res.data.json);
                                }
                                e.key2 = +new Date();
                            });
                        });
                    }
                })
            },
            sumbitForm(data) {
                console.log(data);
            },
            showDatas() {
                console.log(this.userTables);
            }
        }
    };
</script>
